<!-- 
	name: 悬浮菜单
	version: v0.0.1
	update_time: 2020-6-25 
 -->
<template>
	<view>
		<!-- 遮罩 -->
		<view class="mask" v-if="show" @tap="hidemask()" @touchmove.stop.prevent></view>
		<!-- 按钮 -->
		<view class="major-box" :style="{top: top + 'px' }">
			<view class="click-btn" @tap="showmask()" draggable="true" @touchstart="touchstart"
				@touchmove.stop.prevent="touchmove">
				<view class="icon">
					<u-icon name="map" color="#ffffff" size="12"></u-icon>
				</view>
				<view class="text ellipsis">{{address}}</view>
			</view>
		</view>
		<view>
			<view class="nav-box" :class="show == true?'show':'hide'">
				<view class="nav-btn" :class="btn.check == true?'yes':''" v-for="(btn, index) in btnList" :key="index" @tap="clickBtn(btn,index)">
					<view class="nav-icon">
						<image :src="'https://dongya.hualin688.com'+btn.icon" mode=""></image>
					</view>
					<view class="nav-text">{{btn.name}}</view>
				</view>
				<view style="width: 80%; margin-top: 20px;">
					<u-button :text="$t('user.yes')" type="primary" size="mini" @click="yes"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, // 是否显示
				top: 300, // 顶端距离 
				deviationTop: 0, // 偏移量
				windowHeight: uni.getSystemInfoSync().windowHeight, // 视图高度 
				btnList: [],
				address: '',
				info:{}
			};
		},
		created() {
			this.address = uni.getStorageSync('address')
			this.getlist()
		},
		methods: {
			showmask(){
				this.show = !this.show
				uni.hideTabBar()
			},
			hidemask(){
				this.show = false
				uni.showTabBar()
			},
			getlist() {
				const params = {
					map: 'applet_get_area'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						res.data.data.map(item => {
							if (item.name == this.address) {
								item.check = true
							} else {
								item.check = false
							}
						})
						this.btnList = res.data.data
					} else {

					}
				})
			},
			yes(){
				console.log(this.info)
				this.show = false
				uni.setStorageSync('address', this.info.name)
				this.address = this.info.name
				uni.setStorageSync('adcode', this.info.adcode)
				this.$emit("init")
			},
			// 点击按钮 
			clickBtn: function(btn,index) {
				this.btnList.map(item=>{
					item.check = false
				})
				this.btnList[index].check = true
				this.info = this.btnList[index]
				console.log(this.btnList)
			},
			// 拖动开始，记录一下偏移量
			touchstart: function(e) {
				var touch = e.touches[0] || e.changedTouches[0];
				this.deviationTop = touch.clientY - this.top;
				// console.log(this.deviationTop);
			},
			// 上下拖动时 
			touchmove: function(e) {
				var touch = e.touches[0] || e.changedTouches[0];
				var top = touch.clientY;
				top = top - this.deviationTop;
				if (top < 0) {
					top = 0;
				}
				if (top > this.windowHeight - 40) {
					top = this.windowHeight - 40;
				}
				this.top = top;
				return false;
			},
		}
	};
</script>

<style>
	/* 遮罩 */
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.4);
	}

	/* 总盒子 */
	.major-box {
		border: 1px 0 solid;
		z-index: 1000;
		position: fixed;
		right: 0;
	}

	/* 展开时 */
	.show {
		top: 400rpx !important;
		opacity: 1;
		z-index: 1000 !important;
	}

	.hide {
		top: 0rpx !important;
		opacity: 0;
		z-index: -1 !important;
	}

	.nav-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
		transition: all 0.3s;
		z-index: 1000;
		background-color: #FFF;
		border-radius: 0 0 0 5px;
		width: 400rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		border-radius: 20rpx;
	}

	.click-btn {
		width: 80rpx;
		height: 80rpx;
		background-color: #44bbfc;
		border-radius: 100rpx;
		text-align: center;

	}

	.click-btn .icon {
		width: 24rpx;
		margin: 0 auto;
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.click-btn .text {
		font-size: 20rpx;
		color: #fff;
		margin-top: 5rpx;
	}

	.nav-btn {
		flex: 1;
		border: 0px #000 solid;
		min-width: 120rpx;
		padding: 12rpx 0;
		padding-bottom: 20rpx;
		border-radius: 10rpx;
	}
	.yes{
		background-color: #44bbfc;
		color: #fff;
	}
	.nav-icon {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		font-size: 15px;
		border-radius: 50%;
		background-color: #666;
		color: #fff;
	}

	.nav-icon image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.nav-text {
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>
